let v = new Vue({
    el:'#main-container',
    data:function () {
        return {
            settings:{
                data:{
                    simpleData: {
                        enable:true,
                        pIdKey:'parentId'
                    }
                },
                callback:{
                    onClick:this.onClick,
                    beforeEditName:this.beforeEditName
                },
                view:{
                    // fontCss:this.fontCss
                    addHoverDom:this.addHoverDom,
                    removeHoverDom:this.removeHoverDom
                },
                edit:{
                    enable: true
                },
            },
            nodes:[],
            pageInfo:{
                pageSize:5
            },
            params:{
                parentId:'',
                parentName:''
            }
        }
    },
    methods:{
        initTree:function () {
            axios({
                url:'manager/area/list',
                method: 'get'
            }).then(resp => {
                this.nodes = resp.data.obj;
                // this.nodes[this.nodes.length] = {id:0,name:'全部',open:true};
                let treeObj = $.fn.zTree.init($("#treeMenu"),this.settings,this.nodes)
                console.log(treeObj);
            }).catch(error => {
                console.log(error);
            });

        },
        selectByPage:function (page,pageSize) {
            axios({
                url:`manager/area/select/${page}/${pageSize}`,
                method:'post',
                data:this.params
            }).then(resp => {
                this.pageInfo = resp.data.obj;
            }).catch(error => {
                console.log(error);
            })
        },
        selectByName:function(){
            this.params.parentId = '';
            this.selectByPage(1,this.pageInfo.pageSize);
        },
        toUpdate:function (area) {
            layer.obj = area;
            layer.open({
                type: 2,
                title: '更新',
                area: ['60%', '60%'],
                content: 'manager/area/toUpdate',
                end:() => {
                    if(!layer.success){
                        this.selectByPage(1,this.pageInfo.pageSize);
                    }
                }
            })
        },
        onClick:function (event, treeId, treeNode) {
            this.params.parentName = '';
            this.params.parentId = treeNode.id;
            this.selectByPage(1,this.pageInfo.pageSize);
        },
        beforeEditName:function () {
            
        },
        addHoverDom:function (treeId,treeNode) {
            let aObj = $("#" + treeNode.tId + "_a");
            if ($("#treeMenu_"+treeNode.id+"_add").length>0) return;
            //<span class="button edit" id="treeMenu_3_edit" title="rename" treenode_edit="" style=""></span>
            let editStr = `<span class="button add" id="treeMenu_${treeNode.id}_add" title="add"  style=""></span>`;
            aObj.append(editStr);
            let span = $("#treeMenu_"+treeNode.id+"_add");
            if (span) span.bind("click", function(){alert("diy Button for " + treeNode.name);});
        },
        removeHoverDom:function (treeId,treeNode) {
            $("#treeMenu_"+treeNode.id+"_add").unbind().remove();
        },
        download:function () {
            location.href='manager/area/download';
        },
        upload:function (e) {
            let file = e.target.files[0];
            let formData = new FormData();
            formData.append('file',file);
            axios({
                url:'manager/area/upload',
                data:formData,
                method:'post',
                header:{'content-type':'multipart/form-data'}
            }).then(resp => {
                layer.msg('上传成功');
            }).catch(error => {
                layer.msg(error.message);
            })
        }
    },
    created:function () {
        this.selectByPage(1,this.pageInfo.pageSize);
    },
    mounted:function () {
        this.initTree();
    }
})